/* ------------------------------------------------------------------------
ビューポート（ポータル機能）
	Copyright (c) 2010, Matsumoto.JS All rights reserved.
 
【使用方法】（なるべく<head>タグ内にて）
<script src="js/prototype.js" type="text/javascript"></script>
<script src="js/scriptaculous.js?load=effects" type="text/javascript"></script>
<script src="js/cookie.js" type="text/javascript"></script>
<script src="js/viewport.js" type="text/javascript"></script>
 
【パラメータの説明】
オブジェクトリテラルで指定
	container: 対象のブロック（default:"viewport"）
	expire: Cookie有効期間（default:0=セッション限り）
 
HTML: 
<!-- コンテナごとの識別のため "title" は必須です -->
<!-- 構造内のCSSクラス "viewport-XXXX" は必須です -->
<!-- "viewport-body" にpadding指定をすると動きが荒れるようです -->
<div id="viewport">
	<div class="viewport-content" title="port01">
		<div class="viewport-head>
			<ul><li class="viewport-open">+</li><li class="viewport-close">_</li></ul>
			Title
		</div>
		<div class="viewport-body">Body</div>
	</div>
	<div class="viewport-content" title="port02">
		<div class="viewport-head>
			<ul><li class="viewport-open">+</li><li class="viewport-close">_</li></ul>
			Title
		</div>
		<div class="viewport-body">Body</div>
	</div>
</div>
<script language="JavaScript" type="text/javascript">
	Event.observe(window,'load',function(){new Viewport();});
</script>
 ------------------------------------------------------------------------ */

var Viewport = Class.create();
Viewport.cookie = null;
Viewport.prototype = {
initialize: function(option) {
	var props = { container : "viewport", expire : 0 };
	if(option) for(var key in option) props[key] = option[key];
	this.container = $(props.container);
	if (!this.container) return;
	if (!Viewport.cookie)
		Viewport.cookie = new CookieManager({expire:props.expire});
	this.container.select('div.viewport-content').each(
	function(el){
		var name = 'vp_' + el.getAttribute("title");
		var ck = Viewport.cookie.getCookie(name);
		var el_head = el.down('.viewport-head');
		var el_open = el.down('.viewport-open');
		var el_clos = el.down('.viewport-close');
		var el_body = el.down('.viewport-body');
		if (ck!=null && ck=='0') {
			el_body.hide();
			el_open.show();
			el_clos.hide();
		} else {
			el_body.show();
			el_open.hide();
			el_clos.show();
		}

		el_open.observe("click",function(){
			new Effect.BlindDown(el_body, { duration:0.3, queue: 'end' });
			el_head.addClassName('viewport-open');
			Viewport.cookie.setCookie(name, '1');
			el_open.hide();
			el_clos.show();
		}.bindAsEventListener(this));

		el_clos.observe("click",function(){
			new Effect.BlindUp(el_body, { duration:0.3, queue: 'end' });
			el_head.removeClassName('viewport-open');
			Viewport.cookie.setCookie(name, '0');
			el_open.show();
			el_clos.hide();
		}.bindAsEventListener(this));
	}
	);
}
}//prototype